<template>
  <view class="page custom-page">
    <custom-head gradient back title="系统设置"></custom-head>

    <view class="addition">
      <view class="tab_list">
        <view class="item" v-for="tab in tabList" :key="tab.url" @click="handleJump(tab.label)">
          <view class="item_left">
            <image class="tab_img" :src="tab.img" mode="aspectFill"></image>
            <text class="title">{{ tab.label }}</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <u-button class="button" type="primary" @click="handleQuitLogin" >退出登录</u-button>
    </view>

  </view>
</template>
<script>

export default {
  data() {
    return {
      tabList: [
        {
          label: '登录设置',
          img: '../../static/img/mine01.png',
        },
        {
          label: '密码修改',
          img: '../../static/img/mine02.png',
        },
        {
          label: '用户协议',
          img: '../../static/img/mine03.png',
        },
        {
          label: '隐私政策',
          img: '../../static/img/mine04.png',
        },
        {
          label: '意见反馈',
          img: '../../static/img/mine03.png',
        },
        {
          label: '关于我们',
          img: '../../static/img/mine04.png',
        }
      ],
    }
  },


  mounted() {
  },

  methods: {
    handleJump(param) {
      if (param === '登录设置') {
        uni.navigateTo({
          url: `/pages/mine/loginSetup`
        })
      } else if (param === '密码修改') {
        uni.navigateTo({
          url: `/pages/mine/changePass`
        })
      } 
    },
    handleQuitLogin() {
      getApp().globalData = {}
      uni.navigateTo({
        url: '/pages/mine/login'
      })
    }
  }
}
</script>
<style scoped lang="scss">
.page {
  background-color: #ffffff;
  height: 100vh;
}
.addition {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 40rpx;
  height: 100%;
  .tab_list {
    height: 100%;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%; 
      height: 120rpx;
      .item_left {
        display: flex;
        align-items: center;

        .tab_img {
          width: 80rpx;
          height: 80rpx;
        }
        .title {
          margin-left: 24rpx;
          font-size: 30rpx;
        }
      }
    }
  }
  .button {
      width: 100%;
      height: 88rpx;
      border-radius: 44rpx;
      margin: 80rpx 0 40rpx 0;
      background-color: #2979ff;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      line-height: 88rpx;
    }
}
</style>
